<ion-header>
  <ion-navbar>
    <!-- <ion-buttons (click)="back()">
      <button ion-button icon-only>
          <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons> -->
    <ion-title>组件编辑</ion-title>
    <ion-buttons end (click)="delete()">
      <button ion-button icon-only>
        <i class="fal fa-trash-alt" (click)="clear()"></i>
      </button>
    </ion-buttons>
    <ion-buttons end (click)="save()">
      <button ion-button icon-only>
        <i class="fal fa-check-circle"></i>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="setting-content">
    <!-- 效果预览 -->
    <div class="setting-title">
      样式设置
    </div>
    <div class="scrollHeight">
      <ion-scroll *ngIf="!(item.type=='ran' || item.type=='deb' || item.type=='col' || item.type=='joy')" class="scrollHeight"
        scrollX="true">
        <!-- 文本 -->
        <div demo-box *ngIf="item.type=='tex'">
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==0}" (click)="changeStyle(0)">
            <layout2text lstyle=0 t0="{{item.t0}}"></layout2text>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==1}" (click)="changeStyle(1)">
            <layout2text lstyle=1 t0="{{item.t0}}" t1="{{item.t1}}"></layout2text>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==2}" (click)="changeStyle(2)">
            <layout2text lstyle=2 t0="{{item.t0}}"></layout2text>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==3}" (click)="changeStyle(3)">
            <layout2text lstyle=3 t0="{{item.t0}}" t1="{{item.t1}}"></layout2text>
          </div>
        </div>
        <!-- 按键 -->
        <div demo-box *ngIf="item.type=='btn'">
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==0}" (click)="changeStyle(0)">
            <layout2button lstyle=0 ico="{{item.ico}}" color="{{item.color}}"></layout2button>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==1}" (click)="changeStyle(1)">
            <layout2button lstyle=1 t0="{{item.t0}}" color="{{item.color}}"></layout2button>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==2}" (click)="changeStyle(2)">
            <layout2button lstyle=2 ico="{{item.ico}}" t0="{{item.t0}}" t1="{{item.t1}}" color="{{item.color}}"></layout2button>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==3}" (click)="changeStyle(3)">
            <layout2button lstyle=3 ico="{{item.ico}}" t0="{{item.t0}}" color="{{item.color}}"></layout2button>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==4}" (click)="changeStyle(4)">
            <layout2button lstyle=4 ico="{{item.ico}}" t0="{{item.t0}}" t1="{{item.t1}}" color="{{item.color}}"></layout2button>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==5}" (click)="changeStyle(5)">
            <layout2button lstyle=5 ico="{{item.ico}}" t0="{{item.t0}}" t1="{{item.t1}}" color="{{item.color}}"></layout2button>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==6}" (click)="changeStyle(6)">
            <layout2button lstyle=6  color="{{item.color}}"></layout2button>
          </div>
        </div>
        <!-- 数据 -->
        <div demo-box *ngIf="item.type=='num'">
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==0}" (click)="changeStyle(0)">
            <layout2number lstyle=0 unit="{{item.unit}}" value=90 t0="{{item.t0}}"></layout2number>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==1}" (click)="changeStyle(1)">
            <layout2number lstyle=1 ico="{{item.ico}}" value=90 color="{{item.color}}" unit="{{item.unit}}" t0="{{item.t0}}"></layout2number>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==2}" (click)="changeStyle(2)">
            <layout2number lstyle=2 ico="{{item.ico}}" value=90 color="{{item.color}}" unit="{{item.unit}}" t0="{{item.t0}}"></layout2number>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==3}" (click)="changeStyle(3)">
            <layout2number lstyle=3 unit="{{item.unit}}" value=90 t0="{{item.t0}}"></layout2number>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==4}" (click)="changeStyle(4)">
            <layout2number lstyle=4 ico="{{item.ico}}" value=90 color="{{item.color}}" unit="{{item.unit}}" t0="{{item.t0}}"></layout2number>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==5}" (click)="changeStyle(5)">
            <layout2number lstyle=5 ico="{{item.ico}}" value=90 color="{{item.color}}" unit="{{item.unit}}" t0="{{item.t0}}"></layout2number>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==6}" (click)="changeStyle(6)">
            <layout2number lstyle=6 value=90 color="{{item.color}}" unit="{{item.unit}}" t0="{{item.t0}}" max="{{item.max}}"></layout2number>
          </div>
        </div>
        <!-- 定时 -->
        <div demo-box *ngIf="item.type=='tim'">
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==0}" (click)="changeStyle(0)">
            <layout2timer lstyle=0 disabled=true></layout2timer>
          </div>
          <div #demo demo-item [ngClass]="{'selected':item.lstyle==1}" (click)="changeStyle(1)">
            <layout2timer lstyle=1 disabled=true></layout2timer>
          </div>
        </div>
      </ion-scroll>
      <!-- 滑块 -->
      <div demo-box class="range-box" *ngIf="item.type=='ran'">
        <div #demo demo-item class="range range1" [ngClass]="{'selected':item.lstyle==0}" (click)="changeStyle(0)">
          <layout2range disabled=true lstyle=0 t0="{{item.t0}}" value="{{item.max}}" min="{{item.min}}" max="{{item.max}}" color="{{item.color}}"></layout2range>
        </div>
        <div #demo demo-item class="range range2" [ngClass]="{'selected':item.lstyle==1}" (click)="changeStyle(1)">
          <layout2range disabled=true lstyle=1 t0="{{item.t0}}" value="{{item.max}}" min="{{item.min}}" max="{{item.max}}" color="{{item.color}}"></layout2range>
        </div>
      </div>
      <!-- debug -->
      <div demo-box class="debug-box" *ngIf="item.type=='deb'">
        <div #demo demo-item class="debug debug1" [ngClass]="{'selected':item.lstyle==0}" (click)="changeStyle(0)">
          <layout2debug lstyle=0></layout2debug>
        </div>
        <div #demo demo-item class="debug debug2" [ngClass]="{'selected':item.lstyle==1}" (click)="changeStyle(1)">
          <layout2debug lstyle=1></layout2debug>
        </div>
      </div>
      <!-- 颜色 -->
      <div demo-box class="color-box" *ngIf="item.type=='col'">
        <div #demo demo-item class="color" [ngClass]="{'selected':item.lstyle==0}" (click)="changeStyle(0)">
          <layout2color lstyle=0 t0="{{item.t0}}" disabled=true></layout2color>
        </div>
        <div #demo demo-item class="color" [ngClass]="{'selected':item.lstyle==1}" (click)="changeStyle(1)">
          <layout2color lstyle=1 t0="{{item.t0}}" disabled=true></layout2color>
        </div>
      </div>
      <!-- 摇杆 -->
      <div demo-box class="joystick-box" *ngIf="item.type=='joy'">
        <div #demo demo-item class="joystick" [ngClass]="{'selected':item.lstyle==0}" (click)="changeStyle(0)">
          <layout2joystick disabled=true></layout2joystick>
        </div>
      </div>
    </div>
    <!-- 基础设置 -->
    <div class="setting-title">
      参数设置
    </div>
    <div class="setting-box" [ngClass]="{'showkeyboard':showKeyboard}">
      <div class="tabs" *ngIf="item.type=='btn'">
        <div class="tab" [ngClass]="{'selected':tabSelected==0}" (click)="tabChange(0)"> 基础设置</div>
        <div class="tab" [ngClass]="{'selected':tabSelected==1}" (click)="tabChange(1)"> 语音设置</div>
      </div>
      <div class="h-line" *ngIf="item.type=='btn'">
        <div class="h-line">
          <div class="active" *ngIf="tabSelected==0"></div>
        </div>
        <div class="h-line">
          <div class="active" *ngIf="tabSelected==1"></div>
        </div>
      </div>
      <div class="tabs notabs" *ngIf="item.type!='btn'">
        <div class="selected">基础设置</div>
      </div>
      <div class="h-line" *ngIf="item.type!='btn'"></div>
      <!-- 基础设置 -->
      <div *ngIf="tabSelected==0">
        <div setting-item *ngIf="item.type=='tim'">
          <div>该组件没有提供可设置的参数</div>
        </div>
        <div setting-item *ngIf="!(item.type=='deb' || item.type=='vid' || item.type=='tim')">
          <div item-name>数据键名</div>
          <div input-box>
            <!-- <ion-input placeholder={{item.key}} [(ngModel)]="item.key"></ion-input> -->
            <input type="text" placeholder={{item.key}} [(ngModel)]="item.key">
          </div>
        </div>
        <div setting-item *ngIf="item.type=='btn'">
          <div item-name>按键类型</div>
          <div item-item class="btnmode">
            <div [ngClass]="{'selected':item.mode==0}" (click)="choseBtnMode(0)">
              <i *ngIf="item.mode==0" class="fal fa-check-square"></i>
              <i *ngIf="item.mode!=0" class="fal fa-square"></i>
              普通按键</div>
            <div [ngClass]="{'selected':item.mode==1}" (click)="choseBtnMode(1)">
              <i *ngIf="item.mode==1" class="fal fa-check-square"></i>
              <i *ngIf="item.mode!=1" class="fal fa-square"></i>
              开关按键</div>
            <div [ngClass]="{'selected':item.mode==2}" (click)="choseBtnMode(2)">
              <i *ngIf="item.mode==2" class="fal fa-check-square"></i>
              <i *ngIf="item.mode!=2" class="fal fa-square"></i>
              自定义</div>
          </div>
        </div>
        <div setting-item *ngIf="item.type=='btn'&&item.mode==2">
          <div item-name>承载内容</div>
          <div input-box>
            <input type="text" placeholder={{item.custom}} [(ngModel)]="item.custom">
          </div>
        </div>
        <div setting-item *ngIf="item.type=='tex'||item.type=='btn'||item.type=='ran'||item.type=='col'|| item.type=='num'">
          <div item-name>显示文本1</div>
          <div input-box>
            <input type="text" placeholder={{item.t0}} [(ngModel)]="item.t0">
          </div>
        </div>
        <div setting-item *ngIf="item.type=='tex'||item.type=='btn'">
          <div item-name>显示文本2</div>
          <div input-box>
            <input type="text" placeholder={{item.t1}} [(ngModel)]="item.t1">
          </div>
        </div>
        <div setting-item *ngIf="item.type=='num'">
          <div item-name>数据单位</div>
          <div input-box>
            <input type="text" placeholder={{item.unit}} [(ngModel)]="item.unit">
          </div>
        </div>
        <div setting-item *ngIf="item.type=='ran'">
          <div item-name>最小值</div>
          <div input-box>
            <input type="number" placeholder={{item.min}} [(ngModel)]="item.min">
          </div>
        </div>
        <div setting-item *ngIf="item.type=='ran'||item.type=='num'">
          <div item-name>最大值</div>
          <div input-box>
            <input type="number" placeholder={{item.max}} [(ngModel)]="item.max">
          </div>
        </div>
        <div setting-item *ngIf="item.type=='btn' || item.type=='num'">
          <div item-name>显示图标</div>
          <div class="icon-box">
            <div class="btn" (click)="changeIcon()">修改图标</div>
          </div>
        </div>
        <div setting-item *ngIf="item.type=='btn'||item.type=='ran'|| item.type=='num'">
          <div item-name *ngIf="item.type=='btn'|| item.type=='num'">图标颜色</div>
          <div item-name *ngIf="item.type=='ran'">滑动条颜色</div>
          <div class="color-btn-box">
            <div color-btn gray (click)="changeColor('595959')">
              <div class="selected" *ngIf="item.color=='595959'"></div>
            </div>
            <div color-btn red (click)="changeColor('EA0909')">
              <div class="selected" *ngIf="item.color=='EA0909'"></div>
            </div>
            <div color-btn green (click)="changeColor('00A90C')">
              <div class="selected" *ngIf="item.color=='00A90C'"></div>
            </div>
            <div color-btn blue (click)="changeColor('076EEF')">
              <div class="selected" *ngIf="item.color=='076EEF'"></div>
            </div>
            <div color-btn purple (click)="changeColor('6010E4')">
              <div class="selected" *ngIf="item.color=='6010E4'"></div>
            </div>
            <div color-btn yellow (click)="changeColor('FBA613')">
              <div class="selected" *ngIf="item.color=='FBA613'"></div>
            </div>
          </div>
        </div>

      </div>
      <!-- 语音设置 -->
      <div *ngIf="tabSelected==1">
        <div class="speech-table">
          <div class="speech-title" setting-item>
            <div class="col1">
              语音内容
            </div>
            <div>
              动作
            </div>
            <div class="speech-del-button">
            </div>
          </div>
          <div setting-item *ngFor="let speechCmd of item.speech;index as i">
            <div input-box>
              <input type="text" placeholder={{speechCmd.cmd}} [(ngModel)]="speechCmd.cmd">
            </div>
            <div>{{speechCmd.act}}</div>
            <div class="speech-del-button" (click)="delSpeechCmd(i)">
              <ion-icon name="close"></ion-icon>
            </div>
          </div>

        </div>
        <button *ngIf="item.speech.length < 10" ion-button class="speech-add-button" (click)="showSpeechCmd()">
          添加语音指令
        </button>
      </div>

    </div>
  </div>
</ion-content>